<template>
    <div>
        <el-page-header content="添加合作企业" icon="" title="合作企业管理"></el-page-header>
        <el-form
        :model="cooperationForm"
        :rules="cooperationFormRules"
        ref="cooperationFormRef"
        label-width="100px"
        class="demo-ruleForm"
        >
            <el-form-item label="企业名称" prop="cooperationName">
                <el-input v-model="cooperationForm.cooperationName"></el-input>
            </el-form-item>
            <el-form-item label="企业网址" prop="cooperationWebsite">
                <el-input v-model="cooperationForm.cooperationWebsite"></el-input>
            </el-form-item>
            <el-form-item label="企业地址" prop="cooperationAddress">
                <el-input v-model="cooperationForm.cooperationAddress"></el-input>
            </el-form-item>
            <el-form-item label="联系方式" prop="cooperationPhone">
                <el-input v-model="cooperationForm.cooperationPhone"></el-input>
            </el-form-item>
            <el-form-item label="企业Email" prop="cooperationEmail">
                <el-input v-model="cooperationForm.cooperationEmail"></el-input>
            </el-form-item>
            <el-form-item label="企业简介" prop="cooperationIntroduce">
                <el-input v-model="cooperationForm.cooperationIntroduce"></el-input>
            </el-form-item>                    
            <el-button style="margin-left:48%" type="primary" @click="submitForm()">添加合作企业</el-button>
        </el-form>
    </div>
</template>

<script setup>
import {ref,reactive} from 'vue'
import {ElMessage} from 'element-plus'
import {addCooperationAPI} from '@/api'

const cooperationFormRef=ref()
const cooperationForm=reactive({
    cooperationName:"",
    cooperationWebsite:"",
    cooperationAddress:"",
    cooperationPhone:"",
    cooperationEmail:"",
    cooperationIntroduce:""
})



const cooperationFormRules=reactive({
    cooperationName: [{ required: true, message: '请输入企业名称', trigger: 'blur' }],
    cooperationWebsite: [{ required: true, message: '请输入企业网址', trigger: 'blur' }],
    cooperationAddress: [{ required: true, message: '请输入企业地址', trigger: 'blur' }],
    // cooperationEmail:[{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
    //                   { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }],
    cooperationPhone:[{ required: true, message: "请正确填写座机：区号-号码", trigger: "blur",pattern: /^(\d{3,4}-)?\d{5,8}$/}] 
    
})
// 添加企业
const submitForm=()=>{
    cooperationFormRef.value.validate(async valid=>{
        if(valid){
            const {data:res}=await addCooperationAPI(cooperationForm)          
            if (res.status !== 0) {
                ElMessage.error('添加失败');
                return
            }
            ElMessage.success('添加成功')
            console.log('res',res);
        }
    })
}

</script>

<style lang="scss" scoped>
.demo-ruleForm{
    margin-top: 50px;
}

</style>